<template>
  <div class="orderGoodsDetail">
    <div class="topbar">
      <p>客户</p>
      <el-select v-model="customerNo" style="width:8vw;" @change="search">
        <el-option
          v-for="item in customerList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
          <span style="float:left">{{item.value}}</span>
          <span style="float:right">{{item.label}}</span>
        </el-option>
      </el-select>
      <p>货号</p>
      <el-input v-model="kindsNumber" style="width:8vw;" @keyup.enter.native="search"></el-input>
      <p class="t_content">日期</p>
      <el-date-picker
        unlink-panels
        v-model="dateList"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        @change="search">
      </el-date-picker>
    </div>

    <div class="operation">
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <el-button icon="el-icon-upload2" @click="exportTable">导出</el-button>
      <span>
         <el-radio v-model="radio" label='0' border>合计</el-radio>
         <el-radio v-model="radio" label='1' border>不合计</el-radio>
        <el-radio v-model="radio" label='2' border>差异</el-radio>
        <!-- <el-checkbox v-model="checked1" border></el-checkbox>
        <el-checkbox v-model="checked2" border></el-checkbox> -->
      </span>
    </div>

    <el-table 
      :data="tableData" 
      style="width: 100%" 
      height="75vh" 
      :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" 
      :cell-style="{padding:0,height:'36px'}">
      <el-table-column prop="typeNumber" label="款号" width="160"></el-table-column>
      <el-table-column prop="manufacturerOrderTotal" label="厂商订货"></el-table-column>
      <el-table-column prop="customerOrderTotal" label="客户订货"></el-table-column>
      <el-table-column prop="c05" label="C05"></el-table-column>
      <el-table-column prop="c07" label="C07"></el-table-column>
      <el-table-column prop="c09" label="C09"></el-table-column>
      <el-table-column prop="c11" label="C11"></el-table-column>
      <el-table-column prop="c13" label="C13"></el-table-column>
      <el-table-column prop="c15" label="C15"></el-table-column>
      <el-table-column prop="c17" label="C17"></el-table-column>
      <el-table-column prop="c19" label="C19"></el-table-column>
      <el-table-column prop="c21" label="C21"></el-table-column>
      <el-table-column prop="c23" label="C23"></el-table-column>
      <el-table-column prop="f" label="F"></el-table-column>
      <el-table-column prop="totalAmount" label="总数量"></el-table-column>
    </el-table>

    <foot-view class="footView" 
      :pagesNum="pagesNum" 
      :hasPagination=true
      :pageSize="limit"
      :tableTypeChange="tableTypeChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
      </div>
    </foot-view>

  </div>
</template>

<script>
import footView from '../../../components/FootView'

import { getClient } from '../../../network/client'
import { orderDetails } from '../../../network/customerOrderTotal'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'
import zero from '../../../components/mixins/zero2blank'

import table2excel from 'js-table2excel'

export default {
  name:'order_goods_detail',
  mixins: [today,enterUp, zero],
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    
    this.inpList = this.getInput()
    // 默认选之前一周
    // this.dateList = [this.searchDate(7),this.searchDate()]

    // 获取客户列表
    getClient().then(res => {
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          if(e.stop != 1){
            this.customerList.push({value:e.no,label:e.name})
          }
        })
      }
    })
  },
  data(){
    return {
      inpList: [],
      customerNo: '',
      customerList: [],
      kindsNumber: '',
      dateList: null,
      radio: '1',
      tableData: [],
      allData: [],

      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      tableTypeChange: false,
      jxQuarter: null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
    }
  },
  watch: {
    dataLen(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    radio(){
      this.search()
    },
    kindsNumber(a,b){
      this.kindsNumber = a.toUpperCase().trim()
    }
  },
  components: {
    footView
  },
  methods: {
    search(){
      let d = {
        customerNo: this.customerNo,
        kindsNumber: this.kindsNumber,
        // isDifference: this.radio == 2 ? true : false,
        startTime: (this.dateList == '' || this.dateList == null) ? '' : this.dateList[0] + ' 00:00:00',
        endTime: (this.dateList == '' || this.dateList == null) ? '' : this.dateList[1] + ' 23:59:59',
        pageData: {
          limit: 999999999999,
          page: 1
        },
        selectType: this.radio
      }
      orderDetails(JSON.stringify(d)).then(res => {
        if (res.data.code == 200) {
          this.currentPage = 1
          this.tableTypeChange = !this.tableTypeChange
          this.dataLen = res.data.data.length
          this.allData = res.data.data || []
          this.tableData = this.allData.slice(0,this.limit)

          this.zero2blank(this.allData)
        }
      })
    },
    exportTable(){
      let type = ''
      switch (this.radio) {
        case '0':
          type = '合计'
          break;
        case '1':
          type = '不合计'
          break;
        case '2':
          type = '差异'
          break;
        default:
          break;
      }
      let column = [
        { key:"typeNumber", title:"款号", type: 'text'},
        { key:"manufacturerOrderTotal", title:"厂商订货", type: 'text'},
        { key:"customerOrderTotal", title:"客户订货", type: 'text'},
        { key:"c05", title:"C05", type: 'text'},
        { key:"c07", title:"C07", type: 'text'},
        { key:"c09", title:"C09", type: 'text'},
        { key:"c11", title:"C11", type: 'text'},
        { key:"c13", title:"C13", type: 'text'},
        { key:"c15", title:"C15", type: 'text'},
        { key:"c17", title:"C17", type: 'text'},
        { key:"c19", title:"C19", type: 'text'},
        { key:"c21", title:"C21", type: 'text'},
        { key:"c23", title:"C23", type: 'text'},
        { key:"f", title:"F", type: 'text'},
        { key:"totalAmount", title:"总数量", type: 'text'},
      ]
      table2excel(column, this.allData, "订货明细" + type + ".xls")
    },

    // 每页显示页数改变
    handleSizeChange(val){
      this.limit = val
      this.tableData = this.allData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
    },
    // 当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.tableData = this.allData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
    },
  }
}
</script>


<style scoped>
  .orderGoodsDetail {
    margin-right: 0.5vw;
    padding: 0 15px;
    background-color: white;
    height: 95vh;
    position: relative;
  }
  /* 头部 */
  .topbar{
    display: flex;
    white-space: nowrap;
    border-bottom: 2px solid #f4f4f4;
    padding: 1.5vh 0;
  }
  .topbar p{
    margin: 0 10px 0 20px;
    line-height: 30px;
  }

  /* 按钮 */
  .operation{
    padding: 1.5vh 0;
    white-space: nowrap;
  }
  .operation span{
    float: right;
    white-space: nowrap;
  }

  .footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }

</style>

<style>
  .orderGoodsDetail .topbar .el-input{
    width: 8vw;
  }
  .orderGoodsDetail .topbar .el-input__inner{
    height: 30px;
  }
  .orderGoodsDetail .topbar .el-select{
    width: 8vw;
  }
  .orderGoodsDetail .topbar .el-select .el-input{
    width: 100%;
  }
  .orderGoodsDetail .el-button{
    padding: 8px 15px;
    height: 30px;
  }
  .orderGoodsDetail .el-date-editor {
    width: 20vw;
  }

  .orderGoodsDetail .el-input__icon , .orderGoodsDetail .el-date-editor .el-range-separator{
    line-height: 22px;
  }

  .orderGoodsDetail .el-radio.is-bordered{
    margin: 0 0 0 10px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
  }
</style>